import React, { PureComponent } from 'react';
import { Card, Drawer, Spin, Table } from 'antd';
import { PageHeaderWrapper } from '@ant-design/pro-layout';
import { connect } from 'dva';
import _ from 'lodash';
import ProjectsPath from '@/components/ProjectsPath';
import PageTopEdit from './components/PageTopEdit';
import EditContent from './components/EditContent';
import { showConfirm } from '@/utils/utils';

// 分期回款计划编辑
@connect(state => ({
  ...state.ReturnMoneyPlanEdit,
  orgStructure: state.orgStructure,
}))
export default class EditPage extends PureComponent {
  state = {
    groupLoading: false,
    isEdit: false,
    visible: false,
    columns1: [],
    columns2: [],
  };

  componentDidMount() {
    // 初始化请求编辑数据
    this.getEditData(this.props);
    // 初始化请求组团列表
    this.getGroupsList(this.props);
    // 初始化请求版本列表
    this.getVersionsList(this.props);
  }

  componentWillReceiveProps(nextProps) {
    if (this.props.match.params.group !== nextProps.match.params.group) {
      this.getEditData(nextProps);
    }
  }

  // 请求组团列表数据
  getGroupsList = props => {
    const { dispatch, match } = props;
    dispatch({
      type: 'ReturnMoneyPlanEdit/getGroupsList',
      payload: { params: { versionId: match.params.version } },
    });
  };

  // 请求版本列表数据
  getVersionsList = props => {
    const { dispatch, match } = props;
    dispatch({
      type: 'ReturnMoneyPlanEdit/getVersionsList',
      payload: { ...match.params },
    });
  };

  // 请求编辑数据
  getEditData = props => {
    this.setState({ groupLoading: true });
    const { dispatch, match } = props;
    const self = this;
    dispatch({
      type: 'ReturnMoneyPlanEdit/getEditData',
      payload: { params: { versionId: match.params.version, groupId: match.params.group } },
      callback: () => self.setState({ groupLoading: false }),
    });
  };

  // 是否编辑
  handlerIsEdit = () => {
    const { isEdit } = this.state;
    const sef = this;
    if (!isEdit) {
      showConfirm(
        () => sef.setState({ isEdit: !isEdit }),
        '确定要编辑回款计划？',
        '编辑回款计划所审批的流程不一样，请谨慎操作。',
      );
    } else {
      showConfirm(
        () => {
          sef.setState({ isEdit: !isEdit });
          this.getEditData(this.props);
        },
        '确定要取消编辑的回款计划吗？',
        '确保数据保存后再取消。',
      );
    }
  };

  render() {
    const { groupLoading, isEdit, visible, columns1, columns2 } = this.state;
    return (
      <PageHeaderWrapper
        className="page-header"
        breadcrumb={null}
        title={<ProjectsPath menu="SupplyPlan" {...this.props} editName="编制组团回款计划" />}
      >
        <Drawer
          title="项目回款计划概览"
          width={1000}
          closable
          onClose={() => this.setState({ visible: false })}
          visible={visible}
        >
          <span>项目名</span>
          <Table bordered columns={columns1} />
          <br />
          <span>分期</span>
          <Table bordered columns={columns2} />
        </Drawer>
        <Card className="page-header-card-edit">
          <PageTopEdit {...this.props} isEdit={isEdit} handlerIsEdit={this.handlerIsEdit} />
          <Spin spinning={groupLoading && _.isEmpty(this.props.treeData)}>
            <EditContent {...this.props} isEdit={isEdit} />
          </Spin>
        </Card>
      </PageHeaderWrapper>
    );
  }
}
